<template>
  <div>
    <div class="content_text">
      <span class="tcgz">
        核算放款额：￥{{ data.closeMoney }} ，{{ data.empClassName }}提成比例{{
          data.proportion
        }}％，{{ data.empClassName }}提成￥ {{ data.sellMoney }}，
        渠道人员提成比例{{ data.channelRatio }}%，渠道人员提成￥{{
          data.channelMoney
        }},合伙人提成比例{{ data.partnerRatio }}%,合伙人提成￥{{
          data.partnerMoney
        }},注册首单奖励￥{{ data.firstReward }}【{{
          dataStats.calculationState
        }}】</span
      >
      <span v-if="showAgreen">
        <el-popconfirm title="确定同意此数据吗？" @onConfirm="agreeFun">
          <el-button
            slot="reference"
            type="primary"
            size="mini"
            v-if="showAffirmBtn"
            >同意</el-button
          >
        </el-popconfirm>
      </span>
      <el-button
        type="primary"
        size="mini"
        @click="saveFun"
        v-if="showChangeBtn && showAgreen"
        >修改</el-button
      >
    </div>
    <el-dialog
      title="修改"
      :visible.sync="dialogVisible"
      width="25%"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form label-width="120px" :model="form" ref="form" :rules="rules">
        <el-form-item label="本单放款额度:">
          <el-input v-model="form.actualMoney" disabled></el-input>
        </el-form-item>
        <el-form-item label="核算放款额:" prop="closeMoney">
          <el-input v-model="form.closeMoney" @blur="blurCloseMoney"></el-input>
        </el-form-item>
        <el-form-item label="核算点数(%):">
          <el-input v-model="form.enterProportion" disabled></el-input>
        </el-form-item>
        <el-form-item label="提成比例类型:">
          {{ form.proportionName }}
        </el-form-item>
        <el-form-item label="提成比例(%):">
          <el-input v-model="form.proportion" disabled></el-input>
        </el-form-item>
        <el-form-item label="实际收费服务:">
          {{ form.sumMoney }}
        </el-form-item>
        <el-form-item label="销售提成:" prop="sellMoney">
          <el-input v-model="form.sellMoney"></el-input>
        </el-form-item>
        <el-form-item label="渠道比例(%):">
          <el-input v-model="form.channelRatio" disabled></el-input>
        </el-form-item>
        <el-form-item label="渠道提成:">
          <el-input v-model="form.channelMoney" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="合伙人比例(%)">
          <el-input v-model="form.partnerRatio" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="合伙人提成">
          <el-input v-model="form.partnerMoney" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="注册首单奖励">
          <el-input v-model="form.firstMoney" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="公司比例:">
          {{ form.companyRatio }} %，收走￥{{ form.companyMoney }}
        </el-form-item>
        <el-form-item label="核验人:"
          ><span>财务-李枋格（唯一财务角色可核算）</span></el-form-item
        >
        <el-form-item label="授权密码:" prop="authorityPass">
          <el-input v-model="form.authorityPass"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="primaryFun">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCalculation,
  getCalculationShow,
  putCalculation,
  putAffirm,
  getupCharge
} from "../../assets/js/api";
import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "Commission",
  props: ["orderNumber"],
  data() {
    return {
      dialogVisible: false,
      form: {
        sumMoney: "",
        closeMoney: "",
        proportion: "",
        sellMoney: "",
        authorityPass: "",
        id: "",
        partnerMoney: null, //合伙人提成!
        partnerRatio: null, //合伙人比例!
        firstMoney: null //注册首单奖励!
      },
      disChannl: true,
      data: {
        calculationState: 0
      },
      dataStats: {},
      rules: {
        sumMoney: [
          { required: true, message: "请输入本单收入", trigger: "blur" }
        ],
        closeMoney: [
          { required: true, message: "请输入核算收入", trigger: "blur" }
        ],
        proportion: [
          { required: true, message: "请输入提成比例", trigger: "blur" }
        ],
        sellMoney: [{ required: true, message: "销售提成", trigger: "blur" }],
        authorityPass: [
          { required: true, message: "授权密码", trigger: "blur" }
        ]
      },
      golbalPermissions: []
    };
  },
  created() {
    this.getData();
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
  },
  computed: {
    //提成修改按钮
    showChangeBtn: function() {
      return checkPermiss(
        "business:calculation:change",
        this.golbalPermissions
      );
    },
    //提成同意按钮
    showAffirmBtn: function() {
      return checkPermiss(
        "business:calculation:affirm",
        this.golbalPermissions
      );
    },
    //待后信息编辑按钮
    showUpLoansSuffix: function() {
      return checkPermiss(
        "business:upForm:upLoansSuffix",
        this.golbalPermissions
      );
    },
    //修改按钮
    showBtn: function() {
      if (this.data.calculationState == 0) {
        return true;
      } else {
        return false;
      }
    },
    //同意按钮
    showAgreen: function() {
      if (this.data.calculationState != 0) {
        return false;
      } else {
        return true;
      }
    }
  },
  methods: {
    //进页面获取数据
    getData() {
      getCalculation(this.orderNumber).then(res => {
        if (res.data) {
          this.data = res.data;
        }
        if (this.data.calculationState == 0) {
          this.dataStats.calculationState = "未核算";
        } else if (this.data.calculationState == 1) {
          this.dataStats.calculationState = "已核算";
        } else if (this.data.calculationState == 2) {
          this.dataStats.calculationState = "已发放";
        }
      });
    },
    //点击修改后获取数据
    getCalChange() {
      getCalculationShow(this.orderNumber).then(res => {
        if (res.data) {
          this.form = res.data;
        }
        if (!res.data.channelRatio) {
          this.disChannl = true;
        } else {
          this.disChannl = false;
        }
        if (this.data.calculationState == 0) {
          this.dataStats.calculationState = "未核算";
        } else if (this.data.calculationState == 1) {
          this.dataStats.calculationState = "已核算";
        }
      });
    },
    blurCloseMoney() {
      this.form.companyMoney =
        this.form.closeMoney * (this.form.companyRatio / 100);
      this.form.companyMoney = this.form.companyMoney.toFixed(2);
      getupCharge({
        orderNumber: this.orderNumber,
        closeMoney: this.form.closeMoney
      }).then(res => {
        this.form.sellMoney = res.data.sellMoney;
        this.form.channelMoney = res.data.channelMoney;
        this.form.channelRatio = res.data.channelRatio;
      });
    },

    // 修改按钮
    saveFun() {
      this.getCalChange();
      this.dialogVisible = true;
    },
    // 提交按钮
    primaryFun() {
      this.$refs.form.validate().then(() => {
        putCalculation(this.form).then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: "success"
            });
            this.dialogVisible = false;
            this.getData();
          } else {
            this.$message({
              message: res.message,
              type: "error"
            });
          }
        });
      });
    },
    // 同意按钮
    agreeFun() {
      putAffirm(this.orderNumber).then(res => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success"
          });
          this.dialogVisible = false;
          this.getData();
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style scoped type="less">
.el-button {
  margin-left: 15px;
}
.el-form-item {
  margin-bottom: 10px;
}
::v-deep .el-input__inner {
  width: 180px;
}
::v-deep .el-form-item__content {
  text-align: left;
}
::v-deep .el-dialog__body {
  padding: 0 30px;
}
::v-deep .el-dialog__footer {
  height: 70px;
}
.content_text {
  text-align: left;
  text-indent: 2em;
}
.content_text ::v-deep .el-button {
  float: right;
}
.tcgz {
  font-size: 15px;
}
</style>
